<template>
<div style="padding:0px;margin:0px; height:455px;">
<img id="resultposter" src="#" width="250" height="455" >

<!-- 海报canvas -->
<canvas id="poster1" v-show="false"></canvas>

<!-- 二维码 -->
<qrcanvas id="qrcode" v-show="false" :options="{
		  		cellSize: 8,
			    data: options.data,
		  	}"></qrcanvas>

</div>	
</template>

<script>

import { mapGetters } from 'vuex';
const Qrcanvas = require('qrcanvas-vue');
import { imgUtil, imgUtil1 } from '../../util/util';

export default {
	name: 'poster',
	
	data () {
		return {
		  	// qrcodeoptions : {
		  	// 	cellSize: 8,
	    //   		  //correctLevel: 'H',
			  //   data: 'hello, world',
		  	// }
		}
	},

	components: {
		Qrcanvas,
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
		]),
	},

	props: {
	    options: {
	      	type: Object,
	      	default : function () {
	      		return {
	      			img : "",
		      		qrcode_l : 0,
		      		qrcode_t : 0,
		      		//qrcode_size : 1,
		      		wxname_l : 0,
		      		wxname_t : 0,
		      		//wxname_size : 1,
		      		wxname_color : '#fff',
		      		wxname_length : 470,
		      		wxname : '',
		      		data : '123',
	      		}
	      	}
	    },
	    
	},

	methods : {
		async init(){

			try{

				var canvas_poster = document.getElementById("poster1");
				

				var img_poster = this.options.img;

			  	var canvas_qrcode = document.getElementById("qrcode");
			  	var img_qrcode = canvas_qrcode.toDataURL("image/png");


			  	var a1 = await imgUtil(img_poster);

			  	var a2 = null;
			  	try{
			  		a2 = await imgUtil(img_qrcode);
			  	}catch(err){
			  		console.log(err);
			  		a2 = await imgUtil1(img_qrcode);
			  	}
				

				const bili = a1.width / 250;

				canvas_poster.width = a1.width;
				canvas_poster.height = a1.height;
				var context = canvas_poster.getContext('2d');

				//海报背景
				context.drawImage(a1, 0, 0, canvas_poster.width, canvas_poster.height);

				context.drawImage(a2, 
					this.options.qrcode_l, 
					this.options.qrcode_t, 
				60 * bili, 60 * bili);

				context.font = (18 * bili) +  "px 微软雅黑";
				context.fillStyle = this.options.wxname_color;
				context.fillText(this.options.wxname, 
					this.options.wxname_l, 
					this.options.wxname_t + (18 * (bili - 0.5)),
					this.options.wxname_length * bili);

				var image = document.getElementById("resultposter");
				//image.setAttribute('crossOrigin', 'anonymous');
				image.src = canvas_poster.toDataURL("image/png");
			}catch(err){
				console.log(err);
			} 
		},

	},

	watch:{
	    
	},

	mounted () {
		
		this.init();

	       
	},

}
</script>

<style scoped>
/*#poster1{
	width: 250px;
	height: 445px;
}*/
</style>
